<style scoped>
.file-item {
  margin-left: 10px;
}
.dir-item {
  margin-left: 10px;
}
.el-checkbox {
  margin-right: 0;
}
</style>
<template>
  <div >
    <p>
      <i :class="isshow?'el-icon-folder-opened':'el-icon-folder'" @click.stop="handleDirClick(fileList)"></i>
      <el-checkbox v-model="fileList.checked" @change="dirchange"></el-checkbox>
      <span @click.stop="handleDirClick(fileList)">{{fileList.name}}</span> 
    </p>
    <div
      class="dir-item"
      v-for="(dir,zindex) in dirlist"
      :key="'dir'+lindex+'-'+zindex"
      v-if="isshow"
    >
      <filestree :index="lindex+'-'+zindex" :checkState="checkState1" :fileList="fileList[dir]"></filestree>
    </div>
    <div v-if="isshow">
      <p v-for="(item,index) in filelist" :key="'file'+lindex+'-'+index">
        <i class="file-item el-icon-document" @click.stop="fileClick(fileList[item],fileList)"></i>

        <el-checkbox v-model="fileList[item].checked" @change="filechange"></el-checkbox>
        <span @click.stop="fileClick(fileList[item],fileList)">{{fileList[item].name}}</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "filestree",
  data() {
    return {
      isshow: false,
      checkState1: false,
      chkecknum:0
    };
  },
  props: {
    fileList: {
      type: Object,
      default: () => {
        return {
          name: "空文件夹",
          fileList: new Set(),
          dirlist: new Set()
        };
      }
    },
    lindex: {
      type: String,
      default: "1"
    },
    checkState: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    fileList(newval, oldval) {this.$forceUpdate();},
    checkState() {
      this.checkState1 = this.checkState;
      this.dirchange(this.checkState);

    },
    testchangeCheck(){
      this.fileList.checked=this.testchangeCheck;
    }
  },
  methods: {
    dirchange(value) {
      let _this = this;
      for (let file of this.filelist) {
        _this.fileList[file].checked = value;
      }
      for (let dir of this.dirlist) {
        _this.fileList[dir].checked = value;
      }
      this.checkState1 = value;
      this.chkecknum = value?this.dirlistlength+this.filelistlength:0
      this.$forceUpdate();
    },
    fileClick(file, leaf) {
      this.$emit("cilckfile", file, leaf);
    },
    handleDirClick(leaf) {
      this.$emit("cilckdir", leaf);
      this.isshow = !this.isshow;
    },
    filechange(value){
      this.$forceUpdate();
    }
  },
  computed: {
    testchangeCheck(){
      return this.chkecknum===this.dirlistlength+this.filelistlength
    },
    dirlist() {
      return Array.from(this.fileList["dirlist"]);
    },
    filelist() {
      return Array.from(this.fileList["fileList"]);
    },
        dirlistlength() {
      return this.dirlist.length;
    },
    filelistlength() {
      return this.filelist.length;
    },
  }
};
</script>
